网页拷贝忍者？用截图就可以变成网页代码：Screenshot to code

（看一乐‍就完了‍）

在很早的笔记中我学习过如何制作微信小程序，在那个时候稍微学习了一下HTML。

HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。

                                                                                   -From 百度百科

而就在昨天早上我发现了一个很有意思的东西，但是昨天是周末，出于“职业素养”我还是强忍着今天才来写这个东西。 这个东西就是Screenshot to Code，在上传一张截图后自动生成网页HTML，并且用的是GPT-4Vision生成代码和DALL-E3生成外观相似的图像。 这个东西可以用的地方就多了，例如在浏览网站的时候看到一个UI非常喜欢，那么就可以直接截图后丢给这个Screenshot to Code，然后它就会生成一个一模一样的给你。

https://github.com/abi/screenshot-to-code

在下方作者给出了一个网页版的链接，点击进去之后最好有一个注册过GPT的邮箱地址，输入后就可以开始操作啦！

界面长这样↓

  最主要的是红框部分，中间大的红框可以用来上传截图，而下方的URL地址则是想要复制的网页地址。  

安装到本地

当然还有本地化的方式，但是对于小白来说需要做的会比较耗时间麻烦，如果真正有感兴趣的小伙伴可以看我贴出来的两个链接：

出于对时间的考虑和我经济实力的考量（主要是我网页版的GPT又登录不上去了）

我这里就找个官方的来演示一下：

好像，也没那么一模一样？？（动图崩了放不上来）‍

其实在官方演示和大部分的视频作者尝试了一下之后发现其结果并没有想象中那样把一个网站完完全全复制过来，顶多是给出组件布局啥的。‍‍‍‍ 不过还有另一个好处就是复制完之后AI还会提供整个复制过来的网页代码，在大部分的页面都是静态的情况下这个可以提升一定的效率。 这个功能无法做到完全替代或者让前端开发者失业，有这时间人程序员自个都能写出来。前端不只是设计网页，还需要功能的设计。 正如我之前学习Unity学一半之后GPT横空出世引起一堆想要做游戏却不想学代码的人狂欢一样，这些功能在目前看来是无法替代人类的（市面上放出来的AI‍），代码什么的看不懂的话出错了要改都不知道在哪改。 不过前景倒是值得期待，我是希望AI能够让效率越来越高而不是单纯把人类给顶替掉。‍‍ ‍

---

今天的内容就到这里结束啦！

感觉好像没啥营养一样今天的文章，其实我一开始看到这个还是觉得很厉害的，但是深入了解了一下之后觉得这个Screenshot to Code仍然处于一个不断迭代的阶段，还无法真正意义上运用到生产环境。

当然学习一下了解一些新的东西还是不错的，大伙来都来了我还是放一点你们喜欢看的吧。